<template>
	<view>
		<topbar :title="name" jt_c="2" background="background:#5EBCA3;color:#fff;"></topbar>
		<view class="content">
			<view class="top dis_f_l_c">
				<image class="tx" :src="avatar" mode=""></image>
				<view class="dis_f_co">
					<view class="info dis_f_sb_c">
						<view class="title">{{name}}</view>
						<!-- <view>浏览量：100</view> -->
					</view>
					<view class="info dis_f_sb_c">
						<view class="dis_f_l_c icon">
							<image src="../../static/icon/zhiding.gif" mode="" v-if="istop"></image>
							<image src="../../static/icon/shuaxin.gif" mode="" v-if="is_refresh"></image>
						</view>
						<view>更新于:{{refresh_time}}</view>
					</view>
				</view>
			</view>
			<view class="top">
				<view style="margin-bottom: 24rpx;">名片简介</view>
				<view style="width: 100%;color: #777;font-size: 22rpx;" class="hh">
					{{content}}
				</view>
			</view>
		</view>
		<view class="bottom dis_f_sb_c">
			<view></view>
			<view class="btn dis_f_c_c" @click="jia">申请</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="10" width="500" height="300">
			<view class="tc">
				<view style="margin-bottom: 12rpx;">验证消息：</view>
				<u-input style="margin-bottom: 20rpx;" v-model="yz_text" type="text" :border="true"></u-input>
				<view style="width: 100%;" class="dis_f_c_c">
					<view class="dis_f_c_c sq_btn" @click.stop="sq_hy()">申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				content:'',
				avatar:'',
				refresh_time:'',
				istop:false,
				is_refresh:false,
				show:false,
				yz_text:'',
				id:0,
				avatar:'',
			};
		},
		onLoad(e){
			if(e == undefined) {
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/ren_mai/ren_mai');
				}, 2000); 
			}
			this.id = e.id;
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			if (this.id > 0) {
				this.$.ajax(1, 'post', 'fans/info', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id
				}, (res) => {
					if(res.code == 1){
						this.name = res.data.data.nickname;
						this.avatar = res.data.data.avatar;
						this.content = res.data.data.content;
						this.refresh_time = res.data.data.refresh_time;
						this.avatar = res.data.data.avatar
						if(res.data.data.istop == 1) {
							this.istop = true;
						}
						if (res.data.data.is_refresh == 1) {
							this.is_refresh = true;
						}
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
				})
			}else{
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/ren_mai/ren_mai');
				}, 2000); 
			}
		},
		methods:{
			jia(){
				this.show = true;
			},
			sq_hy(){
				if (this.yz_text == '') {
					this.$.ti_shi('请输入验证');
				}
				this.$.ajax(1,"POST","fans/send_apply",{
					uid:uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					id:this.id,
					content:this.yz_text
				},(res)=>{
					this.show = false;
					this.id = 0;
					if (res.code == 1) {
						this.$.ti_shi(res.msg);
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/ren_mai/ren_mai');
						}, 2000); 
					}else{
						this.$.ti_shi(res.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.sq_btn{
		width: 120rpx;
		height: 60rpx;
		background-color: #E23C63;
		color: #fff;
		border-radius: 10rpx;
	}
	.tc{
		width: 500rpx;
		height: 300rpx;
		padding: 24rpx;
	}
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 130rpx;
		background-color: #fff;
		padding: 0 24rpx;
		.btn{
			color: #fff;
			width: 308rpx;
			height: 96rpx;
			background-color: #E23C63;
			border-radius: 10rpx;
		}
	}
	.content{
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 0 24rpx;
		
		.top{
			padding: 36rpx 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			margin-bottom: 12rpx;
			.tx{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}
			.info{
				width: 522rpx;
				font-size: 22rpx;
				color: #BBB;
				line-height: 32rpx;
				margin-bottom: 20rpx;
				.title{
					font-size: 28rpx;
					line-height: 40rpx;
					color: #222;
				}
				.icon{
					image{
						margin-right: 12rpx;
						height: 36rpx;
						width: 96rpx;
					}
				}
			}
		}
	}
</style>
